<template>
    <div class="flex items-center border-b">
        <div class=" text-[16px] h-[40px] leading-[40px] mr-[20px] font-medium transition-all duration-300 relative cursor-pointer"
            :class="{
                'text-black dark:text-[#EAECEF]': activeTab === 'hot',
                'text-gray-500 hover:text-gray-700': activeTab !== 'hot'
            }" @click="activeTab = 'hot'">
            热门
            <span v-show="activeTab === 'hot'"
                class="absolute bottom-0 left-[calc(50%-10px)] w-[20px] h-[3px] bg-primary-400 transition-transform duration-300 transform origin-left"
                :style="{ transform: activeTab === 'hot' ? 'scaleX(1)' : 'scaleX(0)' }"></span>
        </div>

    </div>
</template>

<script setup>
import { ref, watch } from 'vue';
const activeTab = ref('hot');
watch
</script>